<template>
	<div id="videocontent">
		<div class="head-top">
			<mt-header title="音频详情">
				<mt-button icon="back" slot="left" @click='back'></mt-button>
				
			</mt-header>
		</div>
		<div class="music">
			<div class="music-box">
				<img src="../../../../../../static/bofang.png" alt="" width="44px" height="44px"/>
			</div>

			<mt-range v-model="rangeValue" :min="10" :max="90" :step="10" :bar-height="5" >
				<range-runway style="border-top-width: 1px;"></range-runway>
				<range-progress style="width: 0%; height: 1px;"></range-progress>
				<range-thumb style="left: 10%;"></range-thumb>
			</mt-range>

		</div>
		
		<div class="title">
			<p class="subtitl">【给你一首歌的时间】并邀请了蔡康永、金星、罗振宇、张泉灵、高晓松担任导师!</p>

			<p class="paly">
				<span>3.3万播放量</span>
				<span>2018年4月14日发布</span>
			</p>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rangeValue: '100',
				progress: 10, // 当前的 进度(相对于 整个 range 的 百分比)
				max: 100,
				min: 0,
				step: 1,
				dragState: {}, //   拖动的  状态
				newProgress: null, //   新的 在 range 里的 占比
				isDragging: true, //    是否正在拖动
				supportTouch: true //   是否支持 touch 事件(源码里是判断来着，但我还是写死好了)
			}
		},
		methods:{
			back(){
				this.$router.back(-1);
			}
		}
	}
</script>

<style scoped>
	#videocontent .music {
		background-color: #FFFFFF;
		overflow: hidden;
	}
	
	#videocontent .music .music-box {
		width: 235px;
		height: 235px;
		margin: 0 auto;
		margin-top: 36px;
		margin-bottom: 45px;
		background-color: #2699EB;
		border-radius: 50%;
	}
	.music-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.title {
		background-color: #FFFFFF;
		margin-top: 17px;
		padding: 0 15px;
	}
	
	.title .subtitl {
		font: 15px/22px "microsoft yahei";
		font-weight: 600;
		padding-top: 10px;
	}
	
	.title .paly {
		display: flex;
		justify-content: space-between;
		color: #A1A1A1;
		margin-top: 10px;
		padding-bottom: 20px;
		font-size: 12px;
	}
	
	.mt-range {
		margin-bottom: 36px;
	}
</style>